<template>
  <AppLayout>
    <div :class="styles['exam-management']">
      <div class="page-header">
        <h1 class="page-title">我的考试</h1>
        <button class="add-exam-btn" @click="showAddExamModal = true">
          <i class="btn-icon">➕</i>
          <span>创建考试</span>
        </button>
      </div>

      <div class="filters">
        <div class="search-box">
          <input v-model="searchQuery" type="text" placeholder="搜索考试..." class="search-input">
          <i class="search-icon">🔍</i>
        </div>
        <div class="filter-options">
          <select v-model="statusFilter" class="filter-select">
            <option value="">所有状态</option>
            <option value="draft">草稿</option>
            <option value="published">已发布</option>
            <option value="ongoing">进行中</option>
            <option value="completed">已完成</option>
          </select>
        </div>
      </div>

      <div class="exams-grid">
        <div v-for="exam in filteredExams" :key="exam.id" class="exam-card">
          <div class="exam-header">
            <h3 class="exam-title">{{ exam.name }}</h3>
            <span class="exam-status" :class="exam.status">
              {{ getStatusLabel(exam.status) }}
            </span>
          </div>
          <div class="exam-info">
            <p class="exam-description">{{ exam.description }}</p>
            <div class="exam-meta">
              <span class="meta-item">
                <i class="meta-icon">📅</i>
                {{ formatDate(exam.startTime) }}
              </span>
              <span class="meta-item">
                <i class="meta-icon">⏱️</i>
                {{ exam.duration }}分钟
              </span>
              <span class="meta-item">
                <i class="meta-icon">👥</i>
                {{ exam.participantCount }}人参与
              </span>
            </div>
          </div>
          <div class="exam-actions">
            <button class="action-btn edit" @click="editExam(exam)" title="编辑">
              ✏️ 编辑
            </button>
            <button class="action-btn view" @click="viewResults(exam.id)" title="查看成绩">
              📊 成绩
            </button>
            <button class="action-btn delete" @click="deleteExam(exam.id)" title="删除">
              🗑️ 删除
            </button>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import styles from '@/styles/teacher/exam-management.module.css'

const exams = ref([])
const searchQuery = ref('')
const statusFilter = ref('')
const showAddExamModal = ref(false)

const filteredExams = computed(() => {
  return exams.value.filter(exam => {
    const matchesSearch = !searchQuery.value ||
      exam.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      exam.description.toLowerCase().includes(searchQuery.value.toLowerCase())

    const matchesStatus = !statusFilter.value || exam.status === statusFilter.value

    return matchesSearch && matchesStatus
  })
})

const getStatusLabel = (status) => {
  const labels = {
    draft: '草稿',
    published: '已发布',
    ongoing: '进行中',
    completed: '已完成'
  }
  return labels[status] || status
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const editExam = (exam) => {
  console.log('编辑考试:', exam)
}

const viewResults = (examId) => {
  console.log('查看成绩:', examId)
}

const deleteExam = (examId) => {
  if (confirm('确定要删除这个考试吗？')) {
    console.log('删除考试:', examId)
  }
}

onMounted(async () => {
  // 模拟数据
  exams.value = [
    {
      id: 1,
      name: 'Java基础考试',
      description: '测试学生对Java基础知识的掌握程度',
      status: 'published',
      startTime: '2024-01-15 09:00:00',
      duration: 120,
      participantCount: 45
    },
    {
      id: 2,
      name: '数据库原理考试',
      description: '考察数据库基本概念和SQL操作',
      status: 'ongoing',
      startTime: '2024-01-16 14:00:00',
      duration: 90,
      participantCount: 32
    }
  ]
})
</script>